<template>
  <el-dialog v-model="drawer" title="职位详情" width="600px" :append-to-body="true" @close="close">
    <el-form :model="form" :rules="rules" ref="ruleRefForm" class="refForm" label-width="100px" size="small">
      <el-row>
        <el-col :span="12">
          <el-form-item label="入职日期" prop="joinedDate">
            <el-date-picker style="width:160px" v-model="form.joinedDate" type="date" placeholder="请选择" size="small"/>
          </el-form-item>
          <el-form-item label="转正日期" prop="officialDate">
            <el-date-picker style="width:160px" v-model="form.officialDate" type="date" placeholder="请选择" size="small"/>
          </el-form-item>
          <!--          <el-form-item label="合同公司" prop="company">-->
          <!--            <el-input v-model="form.company" placeholder="请输入"></el-input>-->
          <!--          </el-form-item>-->
          <el-form-item label="部门" prop="oaDeptId">
            <el-tree-select v-model="form.oaDeptId" size="small" :data="deptTree" :props="treeProps" check-strictly style="width: 100%" :render-after-expand="false"/>
          </el-form-item>
          <el-form-item label="职位" prop="postId">
            <el-select v-model="form.officePosition" size="small" value-key="id" placeholder="请选择职位" style="width: 100%" @change="positionChange">
              <el-option v-for="item in postList" :key="item['id']" :value="item" :label="item.name"/>
            </el-select>
          </el-form-item>
          <el-form-item label="职务" prop="dutyId">
            <el-select v-model="form.dutyId" size="small" placeholder="请选择职务" filterable style="width: 100%">
              <el-option v-for="item in officePostList" :key="item.id" :value="item.id" :label="item.name"/>
            </el-select>
          </el-form-item>
          <el-form-item label="职等" prop="grade">{{ form.officePosition && form.officePosition.grade ? form.officePosition.grade : '-' }}</el-form-item>
          <el-form-item label="员工状态" prop="state">
            <el-select v-model="form.state" placeholder="请选择" size="small" style="width:160px">
              <el-option v-for="item in stateList" :key="item.value" :label="item.name" :value="item.value"/>
            </el-select>
          </el-form-item>
          <el-form-item label="工作城市" prop="workLocationCode">
            <el-cascader ref="formAreaTree" size="small" v-model="form.workLocationCode" :options="cityList" :props="areaProps" style="width: 100%" @change="locationChange"/>
          </el-form-item>
          <el-form-item label="工作地点" prop="workAddress">
            <el-input v-model="form.workAddress" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="试用期" prop="trialDay">
            <el-select v-model="form.trialDay" placeholder="请选择" size="small" filterable>
              <el-option v-for="item in dictMap['StaffTrialLimit']" :value="item.value" :key="item.value" :label="item.name"/>
            </el-select>
          </el-form-item>
          <el-form-item label="司龄">{{ form.joinedAge }}</el-form-item>
          <el-form-item label="工号" prop="workNo">
            <el-input v-model="form.workNo" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="直属上级" prop="directSuperiorId">
            <el-select v-model="form.directSuperiorId" size="small" placeholder="请选择直属上级" style="width: 100%" filterable clearable>
              <el-option v-for="item in staffList" :key="item.id" :value="item.id" :label="item.name"/>
            </el-select>
          </el-form-item>
          <el-form-item label="兼任" prop="deputyPostId">
            <el-select v-model="form.deputyPostId" size="small" value-key="id" placeholder="请选择兼任职位" style="width: 100%" @change="deputyPositionChange">
              <el-option v-for="item in postList" :key="item['id']" :value="item['id']" :label="item.name"/>
            </el-select>
          </el-form-item>
          <el-form-item label="职级">{{ form.officePosition && form.officePosition.gradeName ? form.officePosition.gradeName : '-' }}</el-form-item>
          <el-form-item label="工作性质" prop="type">
            <el-select v-model="form.type" size="small" filterable placeholder="请选择工作性质">
              <el-option v-for="item in typeList" :key="item.value" :value="item.value" :label="item.name"/>
            </el-select>
          </el-form-item>
          <el-form-item label="招聘渠道" prop="recruitChannel">
            <el-select v-model="form.recruitChannel" placeholder="请选择" size="small" style="width:160px">
              <el-option v-for="item in dictMap['RecruitChannel']" :key="item.value" :label="item.name" :value="item.value"/>
            </el-select>
          </el-form-item>
          <el-form-item label="入职地点" prop="joinedAddress">
            <el-input v-model="form.joinedAddress" placeholder="请输入"></el-input>
          </el-form-item>
          <!--          <el-form-item label="合同期限" prop="contractDate">-->
          <!--            <el-date-picker style="width:160px" v-model="form.contractEnd" type="date" size="small" placeholder="请选择"/>-->
          <!--          </el-form-item>-->
        </el-col>
      </el-row>
      <div class="footer-fixed">
        <el-row justify="center">
          <el-button size="small" type="primary" @click="submit(ruleRefForm)">保存</el-button>
          <el-button size="small" @click="resetForm(ruleRefForm)">取消</el-button>
        </el-row>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
import {computed, reactive, toRefs, ref, onMounted, getCurrentInstance} from 'vue'
import {getSelectorList} from '/@/api/oa/office/post'
import {ElMessage} from 'element-plus'
import {city} from '/@/utils/city'
import {editStaff} from '/@/api/oa/staff'

export default {
  name: 'PostDetail',
  props: {
    dialogDrawer: {
      type: Boolean,
      default: false
    },
    staffData: {
      type: Object,
      default: {}
    },
    dictMap: {
      type: Object,
      default: {}
    },
    stateList: {
      type: Array,
      default: []
    },
    typeList: {
      type: Array,
      default: []
    },
    deptTree: {
      type: Array,
      default: []
    },
    postList: {
      type: Array,
      default: []
    },
    staffList: {
      type: Array,
      default: []
    }
  },
  setup(props, context) {
    const {proxy} = getCurrentInstance()
    const {dialogDrawer} = toRefs(props)
    const drawer = computed({
      get: () => dialogDrawer.value,
      set: val => {
        context.emit('update:dialogDrawer', val)
      }
    })
    const {staffData} = toRefs(props)
    const staff = computed({
      get: () => staffData.value,
      set: val => {
        context.emit('update:staffData', val)
      }
    })
    const state = reactive({
      form: staff,
      rules: {},
      treeProps: {
        children: 'children',
        label: 'name',
        value: 'id'
      },
      officePostList: [],    // 职务列表
      cityList: city,
      areaProps: {
        expandTrigger: 'hover',
        value: 'code'
      }
    })
    const close = () => {
      context.emit('update:dialogDrawer', false)
    }
    const ruleRefForm = ref()
    const submit = async (formEl) => {
      if (!formEl) return
      await formEl.validate(async (valid) => {
        if (valid) {
          const data = Object.assign({}, state.form)
          // 如果是待入职, 把入职日期替换成预计入职日期
          if (data.state == '0') {
            data.reckonJoinedDate = data.joinedDate
            data.joinedDate = null
          }
          // 工作城市 数组转逗号分割字符串
          if (data.workLocationCode) {
            data.workLocation = data.workLocation.join(',')
            data.workLocationCode = data.workLocationCode.join(',')
          }
          const res = await editStaff(data)
          if (res) {
            ElMessage.success('保存成功！')
            context.emit('update:dialogDrawer', false)
          }
        }
      })
    }
    const resetForm = (formEl) => {
      if (!formEl) return
      context.emit('update:dialogDrawer', false)
      formEl.resetFields()
    }
    const positionChange = (val) => {
      if (val && val.id == state.form.deputyPostId) {
        ElMessage.warning('请勿选择与兼任职位相同的职位')
        state.form.officePosition = null
      } else {
        state.form.postId = val.id
      }
    }
    const locationChange = () => {
      state.form.workLocation = proxy.$refs['formAreaTree'].getCheckedNodes()[0].pathLabels
    }
    const deputyPositionChange = (val) => {
      if (val && val == state.form.postId) {
        ElMessage.warning('请勿选择与职位相同的兼任职位')
        state.form.deputyPostId = null
      }
    }
    // 页面加载时
    onMounted(() => {
      try {
        getSelectorList().then(res => {
          state.officePostList = res.data
        })
      } catch (e) {
        console.log(e)
      }
    })
    return {
      drawer,
      staff,
      close,
      positionChange,
      ruleRefForm,
      submit,
      resetForm,
      locationChange,
      deputyPositionChange,
      ...toRefs(state)
    }
  }
}
</script>

<style lang="scss" scoped>
:deep(.el-form-item) {
  align-items: flex-start;
}

.footer-fixed {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 10px 0;
  background: #fff;
  z-index: 999;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;

  //.add-fixed {
  //  padding-left: 20px;
  //  color: var(--el-color-primary);
  //  cursor: pointer;
  //  border-bottom: 1px dotted var(--el-border-color-light);
  //  padding-bottom: 10px;
  //  margin-bottom: 10px;
  //
  //  .add-tips {
  //    margin-left: 5px;
  //    font-size: 13px;
  //  }
  //}
}
</style>
